<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <div>
        <h3>添加购物车</h3>
        <p>商品编号: <input type="text" v-model="product.pid" ></p>
        <p>商品名称: <input type="text" v-model="product.pName"></p>
        <p>商品价格: <input type="text" v-model="product.price"></p>
        <p>商品数量: <input type="text" v-model="product.number"></p>
        <button @click="addCar">添加购物车</button>
    </div>

    <hr>

    <div>
        <h3>购物车</h3>
        <table border="1px" cellspacing="0" width="80%">
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>数量</th>
                <th>单价</th>
                <th>总价格</th>
            </tr>
             <tr v-for="(product,index) in goods">
                <td>{{product.pid}}</td>
                <td>{{product.pName}}</td>
                 <td>
                     <button @click="sub(index)">-</button>
                     <span>{{product.number}}</span>
                     <button @click="add(index)">+</button>
                 </td>
                <td>{{product.price}}</td>
                 <td>
                     {{product.number*product.price}}
                 </td>
             </tr>
        </table>
        <div>
            总计:  {{totalPrice}} 元
        </div>
    </div>

</div>

<script>
    const vm = new Vue({
        el:'#app',
        data:{
            product:{
                pid: '',
                pName:'',
                price:'',
                number: ''
            },
            goods:[
                {
                    pid: 1,
                    pName:'小米手机',
                    price:1000,
                    number: 2
                }
            ]
        },
        methods:{
            addCar(){   //添加购物车
                // 判定商品的信息填写是否正确
                if (this.product.pid.trim().length==0  || isNaN(this.product.pid.trim())){
                    alert("请填写正确的商品编号")
                    return
                }
                if (this.product.pName.trim().length==0){
                    alert("请填写正确的商品名称")
                    return
                }
                if (this.product.price.trim().length==0 || this.product.price <= 0){
                    alert("请填写正确的商品价格")
                    return
                }
                if (this.product.number.trim().length==0 || this.product.number<=0){
                    alert("请填写正确的商品数量")
                    return
                }
                this.goods.push(this.product)
                this.product ={
                    pid: '',
                    pName:'',
                    price:'',
                    number: ''
                }
            },
            add(index){
                this.goods[index].number++
            },
            sub(index){
                if (this.goods[index].number==1){
                    alert("商品的数量不能小于1")
                    return
                }
                this.goods[index].number--

            }

            // totalPrice(){
            //     console.log("------------totalPrice()------------")
            //     let  total = 0;
            //     this.goods.forEach(p=>{
            //         total += p.number*p.price;
            //     })
            //     return total;
            // }
        },
        computed:{   //  计算属性
            totalPrice(){
                console.log("------------totalPrice()------------")
                let  total = 0;
                this.goods.forEach(p=>{
                    total += p.number*p.price;
                })
                return total;
            }
        }
    })
</script>

</body>
</html>
